<template>
    <div class="goods">
      <el-row>
        <el-col :span="6">
          <div class="menu-wrapper" ref="menuWrapper">
            <ul v-if="goods.length">
              <!-- current -->
              <li class="menu-item" v-for="(good, index) in goods" :key="index" :class="{ current: currentIndex === index }" >
                <span class="text">
                  <img
                    v-if="good.icon"
                    class="icon"
                    :src=good.icon
                  />
                  {{good.name}}
                </span>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="foods-wrapper" ref="foodsWrapper" >
            <ul v-if="goods.length">
              <!-- food-list-hook -->
              <li class="food-list" v-for="(good,index) in goods" :key='index'>
                <h1 class="title">{{good.name}}</h1>
                <ul>
                  <li class="food-item" v-for="(item,index) in good.foods" :key='index'>
                    <div class="icon">
                      <img 
                        v-lazy="item.icon"
                      />
                    </div>
                    <div class="content">
                       <div class="head">
                        <span class="name">{{item.name}}</span>
                        <span class="tip" v-if="item.description">({{item.description}})</span>
                      </div>
                      <div class="extra">
                        <span class="count"> 月售 {{item.sellCount}} 份 </span>
                        <span> 好评率 {{item.rating}}% </span>
                      </div>
                      <div class="price">
                        <span class="now"> ￥{{item.price}}&nbsp;&nbsp;&nbsp; </span>
                        <span class="old" v-if="item.oldPrice!==''"> ￥{{item.oldPrice}} </span>
                      </div>
                      <!-- <div class="cartcontrol-wrapper">CartControl</div> -->
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
</template>
<script>
import BScroll from "better-scroll"
import {mapActions,mapState} from 'vuex'
export default {
  name: "ShopGoods",
  data() {
    return {
      ScrollY: 0,//收集右侧滑动的距离
      topList:[],//存放每一个列表的Y轴方向上的距离
    }
  },
  mounted() {
    /************************************************************************************** */
    //这里设计一个回调函数，当数据加载成功的时候再设置滚动
    /************************************************************************************** */
    //这里使用箭头函数可以很好的解决this的指向问题
    this.GetGoods(()=>{
      //数据获取到执行这个回调函数
      this.$nextTick(()=>{
        //Dom更新之后再设置滚动，不然会有错误
        const left = new BScroll('.menu-wrapper',{
          probeType:1
        })
        const right = new BScroll('.foods-wrapper')
        //得到滚动的高度
        left.on('scroll', ({x,y}) => {
          console.log(`x:${x},y:${y}`)
          this.ScrollY = Math.abs(y)
        })
        //收集topList
        console.log(this.$refs.foodsWrapper.getElementsByClassName('food-list'))
      })
    })
    
  },
  methods: {
    ...mapActions(['GetGoods'])
  },
  computed: {
    ...mapState(['goods']),
    //计算属性，标识当前选中的项
    currentIndex: function () {
      return 2
    }
  },
};
</script>
<style lang="less" scoped>
.goods {
  background: #f3f5f7;
  /* height: calc(100% - 201px);
  overflow: scroll; */
  .menu-wrapper {
     height: calc(100vh - 201px);
     overflow:scroll;
    border-right: cornsilk 1px solid;
    .menu-item {
      height: 50px;
      border-bottom: solid 1px red;
      line-height: 50px;
      .text {
        display: block;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        .icon {
          width: 12px;
          height: 12px;
          margin: 0 5px;
        }
      }
    }
    .current {
      background-color: white;
      color: tomato;
    }
  }
  .foods-wrapper {
    height: calc(100vh - 201px);
    overflow:scroll;
    .food-list {
      .title {
        padding-left: 10px;
        height: 25px;
        line-height: 25px;
        font-size: 16px;
        color: rgb(147, 153, 159);
      }
      .food-item{
        display: flex;
        padding: 18px;
        padding-left: 10px;
        background-color: white;
        border-bottom: red 1px solid;
        &:first-child{
          border-top-left-radius: 3px;
          border-top-right-radius: 3px;
        }
        &:last-child{
          border-bottom: none;
          border-radius: 3px;
        }
        .icon{
          img{
            width:57px;
            height:57px;
          }
        }
        .content{
          height: 57px;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          margin-left: 8px;
          .head{
            flex:1;
            font-size: 14px;
            display: flex;
            align-items: center;
            width: 100%;
            //处理文字太长布局效果问题
            .name{
              width: 70%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space:nowrap;
            }
            .tip{
              width: 30%;
              white-space: nowrap;
              text-overflow: ellipsis;
              font-size: 12px;
            }
          }
          .extra{
            flex:1;
            font-size: 10px;
            color: rgb(147, 153, 159);
            display: flex;
            align-items: center;
            .count{
              margin-right: 10px;
            }
          }
          .price{
            flex:1;
            font-size: 10px;
            display: flex;
            align-items: center;
            .now{
              font-size: 13px;
              color: red;
            }
            .old{
              color: rgb(147, 153, 159);
              text-decoration-line:line-through
            }
          }
        }
      }
    }
  }
}
</style>
